<template>
	<div class="pageFaceToFace ">
		<el-dialog title="随缘建群" :visible.sync="pageIsShow" width="500px" center :destroyOnClose='true'
			@closed="handleClosed">
			<div class="">
				<div class="color-smill textCenter" v-show='!FaceToFaceItem.isshow'>
					输入的四个数字进入一个随机的群聊中
				</div>
				<ul class="numberList">
					<li v-for="value,index in FaceToFaceItem.numberList">
						<span class="NumNodeCls" v-show="!value.active"></span>
						<span class="NumCls font20" v-show="value.active">{{value.num}}</span>
					</li>
				</ul>
				<div class="color-smill textCenter" v-show='FaceToFaceItem.isshow'>
					这些朋友也将进入群聊{{FaceToFaceItem.groupNumber}}
				</div>
				<div class="scrollbarOverflow  overHid FaceToFaceUserList" v-show="FaceToFaceItem.isshow">
					<div class="item" :title="`Id:${FaceToFaceItem.fromId}`">
						<el-image style="width: 50px; height: 50px;" :src="storeUserinfo.url+'?w=50&h=50&q=75'" fit="fill">
							<div slot="error" class="image-slot">
								<el-image style="width: 50px; height: 50px;"
									:src="$handledImageError(storeUserinfo.url+'?w=50&h=50&q=75','tx')"
									fit="fill"></el-image>
							</div>
						</el-image>
						<div class="textCenter height20  overflow" :title="`${storeUserinfo.username}`">
							{{storeUserinfo.username}}
						</div>
					</div>
					<div class="item" v-for="value,index in onlineFaceToFaceUserList" :key='value.fromId'
						v-show="value.fromId!=FaceToFaceItem.fromId" :title="`Id:${value.fromId}`">
						<el-image style="width: 50px; height: 50px;" :src="value.fromUrl+'?w=50&h=50&q=75'" fit="fill">
							<div slot="error" class="image-slot">
								<el-image style="width: 50px; height: 50px;"
									:src="$handledImageError(value.fromUrl+'?w=50&h=50&q=75','tx')" fit="fill"></el-image>
							</div>
						</el-image>
						<div class="textCenter height20  overflow" :title="`${value.fromName}`">
							{{value.fromName}}
						</div>
					</div>
					<div class="item">
						<div class="emptyItem"></div>
						<div class="textCenter height20"></div>
					</div>
				</div>
				<div class="" v-show="!FaceToFaceItem.isshow">
					<ul class="keyboard">
						<li @click="handleInputNumber(value)" class="item" v-for="value in 9" :key='value'>
							{{value}}
						</li>
						<li class="item"></li>
						<li @click="handleInputNumber(0)" class="item">0</li>
						<li @click="handleDeleteNumber" class="item">X</li>
					</ul>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="handleIntoGroup" v-loading="loadingINTO"
					v-show="FaceToFaceItem.isshow">进入该群</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	
	import {
		debounce
	} from "@/utils/common.js";
	import {
		faceToFaceCreate
	} from "@/api/faceToface"
	import Storage from "@/utils/session.js"
	export default {
		name: "pageFaceToFace",
		props: {
			
		},
		data() {
			return {
				FaceToFaceItem: {
					groupNumber: '',
					numberList: [{
						active: false,
						num: 0
					}, {
						active: false,
						num: 0
					}, {
						active: false,
						num: 0
					}, {
						active: false,
						num: 0
					}],
					isshow: false,
				},
				loadingINTO: false,
				onlineFaceToFaceUserList: [],
				pageIsShow: false, //页面显示
				count: 1,
			}
		},
		mounted() {},
		computed: {
			storeUserinfo() {
				return this.$store.getters.userInfo;
			},
			newMessage(){
				return this.$store.getters.newMessage
			}
		},

		methods: {
			//初始化页面 value 是否显示
			initData(value) {
				this.pageIsShow = value;
				if (this.count) {
					let userinfo = this.storeUserinfo.Id ? this.storeUserinfo : JSON.parse(Storage.getSession())
					this.FaceToFaceItem.fromId = userinfo.Id;
					this.FaceToFaceItem.fromName = userinfo.username;
					this.FaceToFaceItem.fromUrl = userinfo.url;
				}
				this.count = 0;
			},
			// 隐藏页面
			handleHiddle(v) {
				this.pageIsShow = v;
			},
			//进入群聊
			handleIntoGroup: debounce(function() {
				this.loadingINTO = true;
				let obj = Object.assign({}, this.FaceToFaceItem);
				delete obj.numberList;
				delete obj.isshow;
				faceToFaceCreate(obj).then(res => {
					if (res.status) {
						this.$message({
							message: res.message,
							type: 'success'
						});
						this.FaceToFaceCenterDialogVisible = false;
						//重新请求联系人列表
						this.$store.commit("setIsGetRelationshiplist",true)
						this.loadingINTO = false;
						this.handleHiddle(false);
					} else {

						this.$alert(res.message ? res.message : "网络错误，请刷新重试", '提示', {
							confirmButtonText: '确定',
							type: "warning",
							callback: action => {
								this.handleClosed();
								this.FaceToFaceCenterDialogVisible = false;
								if (action === 'confirm') {
									this.FaceToFaceCenterDialogVisible = true;
								}
							}
						});
					}
				}).catch(() => {
					this.loadingINTO = false;
				})

			}),
			// 面对面建群 输入数据
			handleInputNumber(value) {
				let length = this.FaceToFaceItem.numberList.length;
				if (!this.FaceToFaceItem.isshow) {
					this.FaceToFaceItem.groupNumber = "";
					try {
						for (let i = 0; i <= length; i++) {
							if (this.FaceToFaceItem.numberList[i].active === false) {
								this.FaceToFaceItem.numberList[i].num = value;
								this.FaceToFaceItem.numberList[i].active = true;
								this.FaceToFaceItem.isshow = i === 3
								this.FaceToFaceItem.groupNumber += "" + value;
								i === 3 ? this.handleSend(this.FaceToFaceItem) : ""
								throw new Erroe("stop xh");
							}
							this.FaceToFaceItem.groupNumber += "" + this.FaceToFaceItem.numberList[i].num;
						}
					} catch (e) {
						//TODO handle the exception
						e != "stop xh" ? e : ''
					}
				}
			},
			//删除数据
			handleDeleteNumber() {
				let length = this.FaceToFaceItem.numberList.length - 1;
				for (let i = length; i >= 0; i--) {
					if (this.FaceToFaceItem.numberList[i].active === true) {
						this.FaceToFaceItem.numberList[i].num = 0;
						this.FaceToFaceItem.numberList[i].active = false;
						return;
					}
				}
			},
			//关闭的回调
			handleClosed() {
				let length = this.FaceToFaceItem.numberList.length - 1;
				this.FaceToFaceItem.groupNumber = "";
				this.FaceToFaceItem.isshow = false;
				this.FaceToFaceItem.ItemId = '';
				this.loadingINTO = false;
				for (let i = length; i >= 0; i--) {
					this.FaceToFaceItem.numberList[i].num = 0;
					this.FaceToFaceItem.numberList[i].active = false;
				}
				// this.handleHiddle(false);
			},
			// //发送数据
			handleSend(data) {
				let obj = {
					groupNumber: data.groupNumber,
					type: 5
				}
				this.$store.commit("setOnSend",obj)
			}

		},
		watch: {
			"storeUserinfo": {
				deep: true,
				immediate: true,
				handler: function(value, oldvalue) {
					this.FaceToFaceItem.fromId = value.Id;
					this.FaceToFaceItem.fromName = value.username;
					this.FaceToFaceItem.fromUrl = value.url;
				}
			},
			"newMessage": {
				deep: true, // 深度监听
				handler: function(newVal, oldVal) { // 监听属性的回调方法
					if(!this.$store.getters.isExecute)return
					//判断消息类型
					if (newVal.type === 5) {
						//面对面建群信息
						if (newVal.status) {
							this.FaceToFaceItem.ItemId = newVal.data.ItemId;
							this.FaceToFaceItem.describe = newVal.data.describe;
							this.onlineFaceToFaceUserList = newVal.data.userlist;
							this.$store.commit("setOnlineUsers",newVal.data.userlist)
						} else {
							// 失效
							if (this.FaceToFaceItem.ItemId === newVal.data.ItemId && this.FaceToFaceItem
								.groupNumber === newVal.data.groupNumber) {
								this.$alert(newVal.message, '提示', {
									confirmButtonText: '确定',
									type: "warning",
									callback: action => {
										this.handleClosed();
										this.FaceToFaceCenterDialogVisible = false;
										if (action === 'confirm') {
											this.FaceToFaceCenterDialogVisible = true;
										}
									}
								});
							}
						}
					}
				},
				immediate: false // 页面初始化时是否触发回调
			}
		}
	}
</script>

<style scoped>
	.FaceToFaceUserList {
		max-height: 250px;
		display: flex;
		justify-content: flex-start;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}

	.FaceToFaceUserList .item {
		width: 75px;
		margin: 5px;
		text-align: center;
	}

	.emptyItem {
		width: 50px;
		height: 50px;
		border: 1px solid #000;
		box-sizing: border-box;
		animation-name: emptyItemAnimation;
		animation-duration: 1s;
		animation-iteration-count: infinite;
		animation-direction: alternate-reverse;
	}

	/* 动画代码 */
	@keyframes emptyItemAnimation {
		0% {
			border: 1px solid #000;
		}

		100% {
			border: 1px solid #f3f3f3;
		}
	}

	.numberList {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		list-style-type: none;
		margin: 0;
		padding: 0;
		height: 20px;
		margin-top: 10px;
	}

	.numberList .NumNodeCls {
		display: inline-block;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background-color: #5d5d5d;
		box-shadow: 1px -1px 4px #000;
	}

	.numberList .NumCls {
		display: inline-block;
	}

	.keyboard {
		list-style-type: none;
		display: flex;
		justify-content: flex-start;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}

	.keyboard .item {
		cursor: pointer;
		width: 120px;
		height: 35px;
		line-height: 35px;
		text-align: center;
		font-size: 20px;

	}

	.keyboard .item:hover {
		background-color: #f9feff;
	}

	.keyboard .item:active {
		background-color: #e9f8ff;
	}
</style>